<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>AI - 训练明细</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style lang="less">
    .wrapper {
      display: flex;
    }
    [v-cloak] {
      display: none;
    }
    .ivu-tabs-bar {
      border-bottom: 1px solid #eee !important;
      margin-bottom: 16px;
    }
    .main {
      flex: 1;
      margin-right: 20px;
    }

    .pan1 {
      height: 370px;
      padding: 0 30px;
    }
    .pana{
      margin-top: 20px;
      padding: 30px;
      height: 820px;
      flex-direction: column;
    }
    .panel-ul{
        display: flex;
        position: relative;     
    }
    .panel-ul li{
        font-size: 12px;
        flex: 1;
        color:rgba(102,102,102,1);
        line-height:26px;
        position: relative;
        padding-top: 20px;
    }
    .tab{
        text-align: right;
    }
    .panel-ul::after {
        content: '';
        position: absolute;
        right: 0;
        top: 61px;
        left: 0;
        width: 96%;
        height: 1px;
        background: #eee;
        margin: 0 auto;
    }
    .hash-ul{
        height: 90px;
        position: absolute;
        top: 110px;
    }
    .hashfirst{
        color: #0E9CF2;
        font-size: 16px;
    }
    .hash-li{
        color: #999999;
    }
    .hash-order{
        position: absolute;
        top: 90px;
    }
    
    .state{
        position: absolute;
        top: 300px;
        font-size: 12px;
        padding: 0 30px;
    }
    .state span{
        color: #0E9CF2;
    }
    .state li{
        display: inline-block;
        margin-right: 6px;
        cursor: pointer;
    }
    .state img{
        display: inline-block;
        vertical-align: -2px;
    }
    .tab li{
      display: inline-block;
      padding-top: 0;
      width: 60px;
      cursor: pointer;
      text-align: center;
      height: 31px;
    }
    .tab li:hover{
      border-bottom: 2px solid #0e9cf2;
      color: #0e9cf2;
    }
    .title li{
      display: inline-block;
      height:26px;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:#666666;
      line-height:26px;
    }
    .u-input input{
      width:50px;
      height:26px;
      background:#63C4FF;
      border-radius:3px;
      border: #63C4FF;
      cursor: pointer;
      color: white;
      margin-left: 20px;
    }
    .s-sj{
      margin-left: 100px;
      margin-right: 315px;
    }
    .input2{
      /* width:100px; */
      height:40px;
      background:#0e9cf2;
      border-radius:3px;
      padding: 20px;
      font-size:14px;
      color:white;
      line-height:5px;
      border: none;
      margin-top: 15px;
      margin-left: 25px;
      cursor: pointer;
    }
    .input1{
      /* width:100px; */
      height:40px;
      background:#eee;
      padding: 20px;
      border-radius:3px;
      font-size:14px;
      color:#999;
      line-height:5px;
      border: none;
      margin-top: 15px;
      margin-left: 25px;
      pointer-events: none
    }
    .j-zhi{
      color:#999 !important;
      pointer-events: none !important;
      cursor: not-allowed;
       
    }
    .j-zhi1 input{
      width:50px;
      height:26px;
      background:#eee;
      border-radius:3px;
      border: #63C4FF;
      cursor: pointer;
      pointer-events: none !important;
      color: #999;
      margin-left: 20px;
    }
    .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
    margin: 0;
    margin-right: 0px;
    height: 46px;
    width: 130px;
    padding: 5px 16px 4px;
    border: none;
    border-bottom: 1;
    line-height: 30px;
    color: #999999;
    border-radius: 4px 4px 0 0;
    background: #f8f8f9;
    text-align: center;
    border-top: transparent 1px solid;
    border-bottom: transparent 1px solid;
  } 
  .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
    height: 46px;
    padding-bottom: 5px;
    background: #fff;
    border-radius: 0px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    border: #e6e6e6 1px solid !important;
    border-bottom: #2d8cf0 1px solid !important;
    color: #2d8cf0;
  }
  .detailed_tit,.detailed_countent{
    position: relative;
    -moz-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .c-wu {
    position: absolute;
    right: 0;
  }
  .c-wu a {
    color: #0e9cf2;
  }
  .c-wu a:hover {
    color: #0e9cf2;
  }
  .flex-item:last-child {
    margin-top: 30px;
  }
  .count-text{
    flex: 1;
    height: 570px;
    background: #333333;
    position: relative;
  }
  textarea {
    height: 500px;
    line-height: 1.7;
    background: #2b2b2b;
    width: 95%;
    position: absolute;
    bottom: 0;
    left: 30px;
    border: none;
    font-size: 14px;
    padding: 15px 22px;
    color: #c9c9c9;
    resize: none;
  }
  .b-submit {
    width: 90px;
    height: 35px;
    background:#0e9cf2;
    border-radius:3px;
    border: none;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color: white;
    cursor: pointer;
    display: block;
    margin: 40px auto;
    transition: .25s;
  }
  .b-submit:hover {
    background: #0476bb;
  }
  .in-tit {
    position: relative;
    height: 50px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight:400;
    color: #999999;
    border-bottom: 2px solid #666666;
    width: 95%;
    margin-left: 30px;
  }
  .in-tit dd{
    float: left;
    height: 50px;
    line-height: 50px;
    margin-right: 100px;
  }
  .ivu-modal-header {
    border-bottom: 1px solid #e8eaec;
    padding: 18px 16px;
    line-height: 1;
    text-align: center;    
}
.ivu-modal-header p, .ivu-modal-header-inner {
    display: inline-block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size:16px;
    color: #999999;
    font-weight:400;
    font-family:MicrosoftYaHei;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ivu-modal-body{
  border-bottom: none;
}
.ivu-modal-body p{
  text-align: center;
  padding-top: 44px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:400;
}
.ivu-modal-footer {
    border-top: none;
    padding: 12px 18px 12px;
    text-align: center;
}

.f-quxiao {
    background-color: transparent;
    border-color: transparent;   
    background: #eee;
    color:#999999;
    width: 110px;
    height: 40px;
    border-radius: 4px;
}
.f-sub {
    width: 110px;
    height: 40px;
    background: #0e9cf2;
    border: none;
    margin-right: 112px;
    border-radius: 4px;
    color: white;
}
.f-sub1 {
    width: 110px;
    height: 40px;
    background: #0e9cf2;
    border: none;
    border-radius: 4px;
    color: white;
}
.modal1.oks .rst-lzm {
    display: block;
}
.modal1.oks .ivu-modal-header {
  display: none;
}
.f-dibu {
  width:100px;
  height:40px;
  background:#0e9cf2;
  border-radius:3px;
  border: none;
  color: white;
  cursor: pointer;
}
.f-dibu:hover{
  background: #0476BB;
}
.z-file {
  height: 30px;
  border: 1px solid red;
}
.d-file dd{
  display: inline-block;
}
.d-file dd img{
  display: inline-block;
  vertical-align: -2px;
  margin-right: 12px;
  margin-left: 20px;
  cursor: pointer;
}
.modal1 .ivu-modal-header-inner , .modal2 .ivu-modal-header-inner{
  text-align: left;
}
.textarea-edit {
  resize: none;
  overflow-y: auto;
}
.textarea-edit::-webkit-scrollbar { width: 6px; }
.textarea-edit::-webkit-scrollbar-corner, body::-webkit-scrollbar-track { background-color: #f1f1f1; }
.textarea-edit::-webkit-scrollbar-thumb { background: #555; }
.textarea-edit::-webkit-scrollbar-thumb:vertical:hover { background: #222; }
.textarea-edit::-moz-scrollbar { width: 6px; }
.textarea-edit::-moz-scrollbar-corner, body::-webkit-scrollbar-track { background-color: #f1f1f1; }
.textarea-edit::-moz-scrollbar-thumb { background: #555; }
.textarea-edit::-mozz-scrollbar-thumb:vertical:hover { background: #222; }
textarea::selection { background: rgba(102,102,102,.4); }
textarea::-moz-selection { background: rgba(102,102,102,.4); }
.buyhash-span{
  width:200px;
  height:15px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(51,51,51,1);
  position: absolute;
  top: 20px;
    }
  .buyhash-span2{
    width:200px;
    height:15px;
    font-size:16px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(51,51,51,1);
    position: absolute;
    top: 90px;
  }
  .ivu-radio-inner {
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    top: 0;
    left: 0;
    background-color: #dcdee2;
    border-radius: 50%;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
    .radios .ivu-radio-inner {
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    top: 0;
    left: 0;
    background-color: #8DD4FF;
    border-radius: 50%;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
  .buyhash-ul{
    position: absolute;
    top: 45px;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(102,102,102,1);

    }
    .ivu-slider-wrap {
    width: 506px;
    height: 26px;
    margin: 16px 5px;
    background:transparent;
    border-radius:13px;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    }
    .ivu-slider-bar {
      width:309px;
      height:26px;
      background:transparent !important;
      border-top-left-radius: 13px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 13px;
      position: absolute;
    }
    .ivu-slider-button {
        background: url("images/yu.png");
        height: 41px;
        width: 47px;
        border: none;
        transition: all .2s linear;
        outline: 0;
        position: absolute;
        top: -14px;
        left: -20px;
    }
    .xs-y .ivu-slider-button {
        background: url("images/qradio.png");
        height: 41px;
        width: 47px;
        border: none;
        transition: all .2s linear;
        outline: 0;
        position: absolute;
        top: -14px;
        left: -20px;
    }
    .ivu-slider-button:hover {
        border-color: #2d8cf0;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    .ivu-radio-checked .ivu-radio-inner {
       border-color:#0E9CF2f0;
    }
    .buyhash-zy{
        display: flex;
    }
    .buyhash-zy li:first-child{
        -moz-flex: 1;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        margin-right: 20px;
    }
    .buyhash-zy li:last-child{
        width: 250px;
        line-height: 60px;
        margin-left: 20px;
    }
    .buyhash-zy span{
        margin-right: 3px;
    }
    .buyhash-zy li{
        height: 50px;
    }
    .byhash-ys{
        position: absolute;
        top: 123px;
    }
    .ivu-radio-inner:after {
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0px; 
      top: 0px; 
      border-radius: 9px;
      display: table;
      border-top: 0;
      border-left: 0;
      content: ' ';
      background-color: #2d8cf0;
      opacity: 0;
      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
    }
    .radio{
        margin-right: 45px;
    }
    .counthash{
      position: absolute;
      top: 200px;
      border-top: 2px solid #eee;
      width: 940px;
      padding-top: 30px;
    }
    .counthash a{
      color: white;
      cursor: pointer;
    }
    .counthash li{
      height: 40px;
    }
    .modal1 .ivu-modal-content{
      width: 1000px;
      height: 490px;
    }
    .modal1 {
      user-select: none;
    }
    .modal1 .ivu-modal{
      width: 1000px !important;      
    }
    .i-footer {
    border-top: none;
    padding: 12px 18px 12px;
    text-align: center;
    position: absolute;
    bottom: 15px;
    }
    .u-update {
    border-bottom: 1px solid #fafafa;
    padding: 27px 16px;
    line-height: 1;
    text-align: center;
    }
    .i-ys{
      font-size: 12px;
      color: #666666;
      border-bottom: 1px solid #fafafa;
    }
    .i-top p{
      padding-top: 20px !important;
    }
    .ivu-modal-close{
      display: none;
    }
    .ivu-progress-outer{
      line-height: 14px;
    }
    .ivu-progress{
      line-height: 11px;
    }
    .i-fo{
      padding-bottom: 15px;
    }
    .d-countent{
      padding: 0 0 30px 0;
      color:#666666;
      font-size:14px;
    }
    .d-countent dt{
      display: inline-block;
      width: 33%;
    }
    .ivu-modal-body {
    padding: 13px;
    }
    .modal2 .ivu-modal{
      width:1034px !important;
    }
    .modal2 .ivu-modal-header , .modal3 .ivu-modal-header{
      padding: 18px 26px;
    }
    .ivu-table .ivu-table-header th .ivu-table-cell span {
    font-weight: normal;
    font-size: 14px;
    color:#666666;
    border-radius: 55%;
    }
    .page-w {
      padding: 0 20px 20px 0;
    }
    /* .f-query {
      padding-top: 26px;
    } */
    .u-up span{
      display: inline-block;
      line-height: 24px;
    }
    .u-up{
      position: absolute;
      right: 30px;
      top: 90px;
    }
    .u-down{
      width:80px;
      height:26px;
      border:1px solid #0e9cf2;
      border-radius:2px;
      color: #0e9cf2;
      font-size:12px;
      font-family:MicrosoftYaHei;
      line-height:26px;
      text-align: center;
      cursor: pointer;
    }
    .u-down a{
      color: #0e9cf2;
    }
    .u-down a:hover{
      color: #0e9cf2;
    }
    .u-top{
      padding: 0 0 37px 0;
    }
    .u-fo{
      padding-bottom: 20px;
    }
    .u-top p{
      padding-bottom: 0;
    }
    .u-input input:hover{
      background: #0e9cf2;
    }
    .modal3 .ivu-modal-header-inner, .modal4 .ivu-modal-header-inner{
      text-align: left;
    }
    [v-cloak]{
      display:none;
    }
    .del{
      height: 40px;
      background: url('images/del.png')no-repeat center;
      cursor: pointer;
    }
    .sel:hover{
      background: #0e9cf2;
      color: white;
      width:100%;
      height:47px;
      line-height: 48px;
    }
    .ivu-table-cell {
    padding-left: 0px; 
    padding-right: 0px;
    cursor: pointer;
    }
    .detailed_countent .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-nav-container{
      height: 46px;
    }
    .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused{
      border-top: #e6e6e6 1px solid !important; 
    }
    .c-wu span{
      display: inline-block;
    }
    .c-wu img{
      vertical-align: -3px;
      display: inline-block;
    }
    .d-checd{
      height: 30px;
      vertical-align: middle;
      cursor: pointer;
      color: #0e9cf2;
    }
    .x-jindu{
      height: 20px;
      color: #0e9cf2;
      cursor: pointer;
    }
    .ivu-progress-text{
      display: none;
    }
    .ivu-progress-wrong .ivu-progress-bg {
    background-color: #0FDBF2;
    }
    .ivu-progress-show-info .ivu-progress-outer {
    padding-right: 10px;
    margin-right: -55px;
    }
    .hash-count-ul {
      background: #f8f7f7;
      width: 1340px;
      height: 117px;
      position: absolute;
      top: 170px;
      padding-left: 30px;
    }

    .hash-count-ul li {
      padding-top: 13px;
      width: 300px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #666666;
      display: inline-block;

    }

    .hash-img img {
      display: inline-block;
      vertical-align: -2px;
      margin-right: 19px;
    }
    .d-lie,
    .c-li,
    .z-zhi {
      text-align: right;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #999999;
      width: 505px;
    }
    .y-ac{
      width: 727px !important; 
    }
    .in-d{
      position: absolute;
      right: 0;
      cursor: pointer;
      line-height: 20px;
      cursor: pointer !important;
      z-index: 9999;
    }
    .in-d a:hover {
      color: #0e9cf2;
    }
    /* a{
      color: #0e9cf2
    } */
    .x-zhi{
      pointer-events: none;
      color: #999999 !important;
    }
    .c-submit{
    width: 90px;
    height: 35px;
    background: #eee;
    border-radius: 3px;
    border: none;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: white;
    cursor: pointer;
    display: block;
    margin: 40px auto;
    transition: .25s;
    pointer-events: none;
    }
    .d-checd.on .ivu-progress-bg{
      animation: JinduAnim .3s linear both;
    }
    .d-checd .ivu-progress-inner{
      visibility: hidden;
    }
    .d-checd.on .ivu-progress-inner{
      animation: YincAnim .35s linear both;
    }
    @keyframes YincAnim {
      0%{
        visibility: visible;
      }
      100% {
        visibility: hidden;
      }
    }
    @keyframes JinduAnim {
      100% {
        width: 100%;
      }
    }
    .s-show{
      display: none !important;
    }
    .Current{
      color: #0e9cf2;
    }
    .xs-x {
      position: relative;
    }
    .buyhash-zy .ivu-slider-bar{
      background: #2d8cf0;
    }
    .xs-y .ivu-slider-wrap {
      width: 506px;
      height: 26px;
      margin: 16px 5px;
      background: rgba(238, 238, 238, 1);
      border-radius: 13px;
      vertical-align: middle;
      position: relative;
      cursor: pointer;
    }

    #progress-outer {
      background-color: #8DD4FF;
      width: 98%;
      left: 1%;
      height: 25px;
      position: absolute;
      top: 17px;
      border-radius: 13px
    }

    #progress-bar {
      background-color: #0E9CF2;
      height: 25px;
      border-radius: 13px
    }
    .j-yong{
      pointer-events: none !important;
    }
    .y-wu a{
      font-size: 12px;
      color: #f08903 !important;
    }
    .y-wu {
      font-size: 12px;
      color: #f08903 !important;
    }
    .r-wu a{
      font-size: 12px;
      color: #fa1414 !important;
    }
    .r-wu {
      font-size: 12px;
      color: #fa1414 !important;
    }
    .bu-te {
      display: flex;
    }
    .bu-te input {
      /* flex: 1; */
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="ai_detailed">
    <div class="main">
      <section class="panel">
        <ul class="panel-ul pan1">
          <li>创建时间：{{initData.taskDetai.create_time | formatDate}}</li>
          <li>任务编号：{{initData.taskDetai.task_id}}</li>
          <li>
            <ul class="tab">
              <li :class="{'x-zhi': !dilatationUsable}" @click="modal1 = true">弹性扩容</li>
              <modal class="modal1" :class="{oks: m_cls.isOk}" v-model="modal1" width="500" class-name="vertical-center-modal"
                :closable="false">
                <!-- <div class="ivu-modal-header i-ys">
                </div> -->
                <div class="ivu-modal-body">
                  <div class="buyhash-span">
                    <span>请选择您要购买的算力：</span>
                    <ul class="buyhash-ul">
                      <li>
                        <radio-group v-model="animal" class="j-yong">
                          <radio label="闲置资源" class="radio"></radio>
                          <radio label="非闲置资源" class="radios"></radio>
                        </radio-group>
                      </li>
                      <li>
                        <ul class="buyhash-zy">
                          <!-- <li class="xs-x">
                            <slider v-model="value" :min='1' :data-width="leaveWidth"></slider>
                          </li> -->
                          <li class="xs-x">
                            <div id="progress-outer">
                              <div id="progress-bar" :style="{width: leaveWidth + '%'}"></div>
                            </div>
                            <!--  :data-width="leaveWidth" -->
                            <slider v-model="value" step="27.5" :min="27.5" :max="85" show-stops></slider>
                          </li>
                          <li v-model="value"><span>{{value}}</span>TFLOPS（≈ {{gpuValue}}张1080TI）</li>
                        </ul>
                      </li>
                      <li class="buyhash-span2">请选择您需要训练的时长：</li>
                      <li>
                        <ul class="buyhash-zy byhash-ys">
                          <li class="xs-y">
                            <slider v-model="value1" :min='0' :max='24'></slider>
                          </li>
                          <li v-model="value1"><span>{{value1}}</span>Hour</li>
                        </ul>
                      </li>
                      <li>
                        <ul class="counthash">
                          <li>预估算力：<span v-model="value"><span>{{value}}</span>TFLOPS（≈ {{gpuValue}}张1080TI）</span><span
                              v-model="value1"><span>{{value1}}</span>Hour</span></li>
                          <li>账户余额：{{initData.gpuBalance}}TH</li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="ivu-modal-footer i-footer" slot="footer">
                  <input type="button" value="弹性扩容" class="f-dibu" @click="requestDilatation" />
                  <modal v-model="moda9" title="温馨提示" :loading="loading" class-name="vertical-center-modal">
                    <div class="u-top">
                      <p>弹性扩容失败，训练状态无法选择非闲置资源（或者您选择的资源已被占用）。</p>
                    </div>
                    <div class="modal-footer u-fo" slot="footer">
                      <input type="button" value="好的" class="f-sub1" @click="asyncOK" />
                    </div>
                  </modal>
                </div>
              </modal>
              <!-- class="x-zhi" -->
              <li @click="lishi">历史记录</li>
              <modal class="modal2" :class="{oks: m_cls1.isOk}" v-model="modal2" title="历史记录" width="500" class-name="vertical-center-modal"
                :closable="false">
                <div class="ivu-modal-body">
                  <dl class="d-countent">
                    <dt>任务编号：<span>{{initData.taskId}}</span></dt>
                    <dt>训练次数：<span>{{trainingCount}}</span></dt>
                    <dt>使用算力：<span>{{G.toThousandsRound(payTotalTh)}} TH</span></dt>
                  </dl>
                  <i-table border :columns="columns1" :data="data1" :loading="tbLoading"></i-table>
                </div>
                <div class="modal-footer" slot="footer">
                  <div class="page-w">
                    <Page :total="queryHistory.sizeCount" :page-size="queryHistory.pageSize" :current="queryHistory.currentPage"
                      @on-change="requestHistory" show-total show-elevator />
                  </div>
                </div>
              </modal>
              <!-- class="x-zhi" -->
              <li type="primary" @click="del">销毁任务</li>
              <modal v-model="modal6" title="温馨提示" :loading="loading" class-name="vertical-center-modal">
                <div class="i-top">
                  <p>您正在使用销毁任务功能，你确定要这样做吗？</p>
                  <p>
                    <checkbox v-model="single">同时销毁该任务中的模型和数据源</checkbox>
                  </p>
                </div>
                <div class="modal-footer i-fo" slot="footer">
                  <input type="button" value="立即销毁" class="f-sub" @on-ok="asyncOK" @click="requestTaskDestroy" />
                  <input type="button" value="取消" class="f-quxiao" @click="modalCancel" />
                </div>
              </modal>
            </ul>
          </li>
        </ul>
        <ul class="hash-ul pan1">
          <li class="hashfirst">预估算力：{{G.roundFixed(initData.taskDetai.hour_th * initData.taskDetai.task_h)}} TH</li>
          <li class="hash-li">≈ {{gpuHourth}}张1080TI训练{{initData.taskDetai.task_h}}小时</li>
        </ul>
        <ul class="hash-count-ul" v-if="initData.taskDetai.training_status == 2 || initData.taskDetai.training_status == 3 || initData.taskDetai.training_status == 4">
          <li>训练时长：<span>{{fM(initData.taskDetai.use_task_m)}}</span></li>
          <li class="hash-img y-ac">
            <img src="images/loss.png">LOSS：<span>{{G.roundFixed(loss)}}</span>
          </li>
          <li>算力用量：<span>{{G.roundFixed(initData.taskDetai.use_gpu_total)}}</span>TH</li>
          <li class="hash-img"><img src="images/Accuracy.png">精准度：<span>{{G.roundFixed(acc)}}</span></li>
          <li class="y-ac">训练进度：<span>{{G.roundFixed((initData.taskDetai.use_task_m/(initData.taskDetai.task_h*60))*100)}}</span>%</li>
        </ul>
        <ul class="state">
          <li><img src="images/radio.png"></li>
          <li>状态：
            <span v-if="initData.taskDetai.training_status == 0">准备中</span>
            <span v-else-if="initData.taskDetai.training_status == 1">队列中</span>
            <span v-else-if="initData.taskDetai.training_status == 2">训练中</span>
            <span v-else-if="initData.taskDetai.training_status == 3">已终止</span>
            <span v-else-if="initData.taskDetai.training_status == 4">已完成</span>
            <span v-else-if="initData.taskDetai.training_status == 8">扩容中</span>
            <span v-else-if="initData.taskDetai.training_status == 9">处理中</span>
          </li>
          <li class="d-lie" v-if="initData.taskDetai.training_status == 1">当前还有 {{initData.queueNum}} 个任务在等待
            <!--，等待时间<span>≈1天20小时50分</span>-->
          </li>
          <li class="c-li" v-else-if="initData.taskDetai.training_status == 9">正在为您分配资源
            <!--，已等待<span>1天20小时50分</span>-->
          </li>
          <!-- <li class="z-zhi" v-else-if="initData.taskDetai.training_status == 3">模型异常导致训练中断，您可以通过<span class="c-ri">错误日志</span>锁定错误原因</li> -->
          <br />
          <modal v-model="modalsl" title="温馨提示" :loading="loading" class-name="vertical-center-modal">
            <div class="u-top">
              <p>您没有算力，无法开始训练任务；请先购买算力。</p>
            </div>
            <div class="modal-footer u-fo" slot="footer">
              <input type="button" value="立即购买" class="f-sub" @click="s_sub" />
              <input type="button" value="取消" class="f-quxiao" @click="s_quxiao" />
            </div>
          </modal>
          <div class="bu-te">
            <input type="button" value="开始训练" :class="{input1:!startUsable, input2:startUsable}" v-if="startDisplay"
              @click="startTask" />
            <input type="button" value="终止训练" class="input2" v-if="stopDisplay" @click="zz" />
            <input type="button" value="退出队列" class="input2" v-if="exitqueueDisplay" @click="zzl" />
            <input type="button" value="下载模型" class="input2" v-if="modeldownloadDisplay" @click="downloadModel" />
          </div>
          <modal v-model="modal0" title="温馨提示" :loading="loading" class-name="vertical-center-modal">
            <div class="u-top">
              <p>您正在使用终止训练功能，你确定要这样做吗？</p>
            </div>
            <div class="modal-footer u-fo" slot="footer">
              <input type="button" value="立即终止" class="f-sub" @click="stopTask" />
              <input type="button" value="取消" class="f-quxiao" @click="zzqx" />
            </div>
          </modal>


          <modal v-model="modat" title="温馨提示" :loading="loading" class-name="vertical-center-modal">
            <div class="u-top">
              <p>您正在使用退出队列功能,您可以通过使用闲置GPU来避免加入队列。</p>
            </div>
            <div class="modal-footer u-fo" slot="footer">
              <input type="button" value="立即退出" class="f-sub" @click="stopTask1" />
              <input type="button" value="取消" class="f-quxiao" @click="zzlqx" />
            </div>
          </modal>
        </ul>

      </section>
      <section class="panel pana">
        <div class="detailed_tit flex-item">
          <ul class="title">
            <li>
              <span>
                <span>
                  <dl class="d-file">
                    <dd>AI模型：</dd>
                    <dd class="d-checd" :class="{on:isRateRuning}">
                      <div class="x-jindu" :class="{'j-zhi': !modelDatasetUsable}" @click="sel">{{modelNull ? '选择模型' :
                        '重新选择'}}<img src="images/iocn.png"></div>
                      <i-progress status="wrong" :stroke-width="5" />
                    </dd>
                    <modal class="modal3" :class="{oks: m_cls1.isOk}" v-model="modal3" title="模型" width="1034"
                      class-name="vertical-center-modal" :closable="false">
                      <div class="ivu-modal-body">
                        <div class="u-up">
                          <span>没有数据集?</span>
                          <span class="u-down">
                            <a class="a1" href="javascript:;" @click="G.to('dataManage')"><span>立即上传</span></a>
                          </span>
                        </div>
                        <i-form class="f-query" :model="query" label-position="right" ref="query" inline
                          @keyup.enter.native="requestModel(1)">
                          <form-item class="w230" label="数据名称 : ">
                            <i-input class="w150" clearable placeholder="这里是数据名称" v-model="queryModel.dataName"></i-input>
                          </form-item>
                          <form-item>
                            <i-button type="primary" class="sb-btn" @click="requestModel(1)">查询</i-button>
                            <i-button type="reset" class="reset-btn" @click="resetModel">重置</i-button>
                          </form-item>
                        </i-form>
                        <i-table border :columns="columnsModel" :row-class-name="trActive" :data="dataModel" :loading="queryModel.tbLoading"></i-table>
                      </div>
                      <div class="modal-footer" slot="footer">
                        <div class="page-w">
                          <Page :total="queryModel.sizeCount" :page-size="queryModel.pageSize" :current="queryModel.currentPage"
                            @on-change="requestModel" show-total show-elevator />
                        </div>
                      </div>
                    </modal>


                  </dl>
                </span>
              </span>
            </li>
            <li class="u-input" :class="{'j-zhi1': !modelDatasetUsable}" v-show="modelemptyDisplay"><input type="button"
                value="清空" @click="delkong"></input></li>
            <modal v-model="modal5" title="温馨提示" :loading="loading" class-name="vertical-center-modal">
              <div class="u-top">
                <p>您正在使用清空模型功能，你确定要这样做吗？</p>
              </div>
              <div class="modal-footer u-fo" slot="footer">
                <input type="button" value="立即清空" class="f-sub" @click="delModel" />
                <input type="button" value="取消" class="f-quxiao" @click="col15" />
              </div>
            </modal>
            <li class="s-sj">
              <span>
                <dl class="d-file">
                  <dd>数据集：</dd>
                  <dd class="d-checd" :class="{'j-zhi': !modelDatasetUsable}" @click="shujuji">{{dataSetNull ? '选择数据集'
                    : '重新选择'}}<img src="images/iocn.png"></dd>
                </dl>
                <modal class="modal4" v-model="modal4" title="数据集：" width="1034" class-name="vertical-center-modal"
                  :closable="false">
                  <div class="ivu-modal-body">
                    <div class="u-up">
                      <span>没有数据集?</span>
                      <span class="u-down">
                        <a class="a1" href="javascript:;" @click="G.to('dataManage')"><span>立即上传</span></a>
                      </span>
                    </div>
                    <i-form class="f-query" :model="query" label-position="right" ref="query" inline
                      @keyup.enter.native="requestDataset(1)">
                      <form-item class="w230" label="数据名称 : ">
                        <i-input class="w150" clearable placeholder="这里是数据名称" v-model="queryDataSet.dataName"></i-input>
                      </form-item>
                      <form-item>
                        <i-button type="primary" class="sb-btn" @click="requestDataset(1)">查询</i-button>
                        <i-button type="reset" class="reset-btn" @click="resetDataSet">重置</i-button>
                      </form-item>
                    </i-form>
                    <i-table border :columns="columnsDataSet" :data="dataDateSet" :loading="queryDataSet.tbLoading"></i-table>
                  </div>
                  <div class="modal-footer" slot="footer">
                    <div class="page-w">
                      <Page :total="queryDataSet.sizeCount" :page-size="queryDataSet.pageSize" :current="queryDataSet.currentPage"
                        @on-change="requestDataset" show-total show-elevator />
                    </div>
                  </div>
                </modal>
              </span>
            </li>
            <modal v-model="modal12" title="温馨提示" :loading="loading" class-name="vertical-center-modal">
              <div class="u-top">
                <p>您正在使用销毁数据集功能，销毁后数据集无法找回。</p>
              </div>
              <div class="modal-footer u-fo" slot="footer">
                <input type="button" value="立即销毁" class="f-sub" @click="delAata" />
                <input type="button" value="取消" class="f-quxiao" @click="deldata1" />
              </div>
            </modal>
            <li class="c-wu y-wu" v-if="codeConfigInspect == 12">
              <span><img src="images/iocn1.png"></span>
              <span>警告：模型配置有误，可能导致训练中断；详见：<a href="javascript:;" @click="G.toto('docx.html')">inFlex Bata1.0</a></span>
            </li>
            <li class="c-wu r-wu" v-if="codeConfigInspect == 13">
              <span><img src="images/iocnnn.png"></span>
              <span>错误：模型配置错误，无法进行训练；详见：<a href="javascript:;" @click="G.toto('docx.html')">inFlex Bata1.0</a></span>
            </li>
            <li class="c-wu y-wu" v-if="codeConfigInspect == 22">
              <span><img src="images/iocn1.png"></span>
              <span>警告：模型配置有误，可能导致训练中断；详见：<a href="javascript:;" @click="G.toto('docx.html')">inFlex Bata2.0</a> </span>
            </li>
            <li class="c-wu r-wu" v-if="codeConfigInspect == 23">
              <span><img src="images/iocnnn.png"></span>
              <span>错误：模型配置错误，无法进行训练；详见：<a href="javascript:;" @click="G.toto('docx.html')">inFlex Bata2.0</a></span>
            </li>
          </ul>
        </div>
        <modal v-model="modal8" title="温馨提示" :loading="loading" class-name="vertical-center-modal">
          <div class="u-top">
            <p>您正在使用销毁模型功能，销毁后模型无法找回？</p>
          </div>
          <div class="modal-footer u-fo" slot="footer">
            <input type="button" value="立即销毁" class="f-sub" @click="delAiModel" />
            <input type="button" value="取消" class="f-quxiao" @click="col18" />
          </div>
        </modal>
        <div class="detailed_countent flex-item">
          <div class="in-d" v-if="logdownloadDisplay"><a :href="'/files/exportTaskCallbackLog/'+taskId">下载日志</a></div>

          <tabs type="card">
            <tab-pane label="代码" name="name1">
              <div class="count-text">
                <div class="in-tit">
                  <dl>
                    <dd>创建时间：<span>{{initData.trainingCreateTime | formatDate}}</span></dd>
                    <dd>训练编号：<span>{{initData.taskDetai.training_code}}</span></dd>
                  </dl>
                </div>
                <textarea class="textarea-edit" v-model="codeOrConfig" :disabled="!modelDatasetUsable"></textarea>
              </div>
              <input type="button" value="保存" :class="{'b-submit':modelDatasetUsable,'c-submit':!modelDatasetUsable}"
                @click="addFile" />
            </tab-pane>
            <tab-pane label="训练日志" name="name2">
              <div class="count-text">
                <div class="in-tit">
                  <dl>
                    <dd>创建时间：<span>{{initData.trainingCreateTime | formatDate}}</span></dd>
                    <dd>训练编号：<span>{{initData.taskDetai.training_code}}</span></dd>

                  </dl>
                </div>
                <textarea class="textarea-edit" v-model="taskCallbackLog" disabled="disabled"></textarea>
              </div>
            </tab-pane>
            <tab-pane label="错误日志" name="name3">
              <div class="count-text">
                <div class="in-tit">
                  <dl>
                    <dd>创建时间：<span>{{initData.trainingCreateTime | formatDate}}</span></dd>
                    <dd>训练编号：<span>{{initData.taskDetai.training_code}}</span></dd>
                    <!-- <dd class="in-d"><a :href="'/files/exportTaskCallbackLog/'+taskId">下载日志</a></dd> -->
                  </dl>
                </div>
                <textarea class="textarea-edit" v-model="taskCallbackErrLog" disabled="disabled"></textarea>
              </div>
            </tab-pane>
          </tabs>
        </div>
      </section>
    </div>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="js/ipfs-index.js"></script>
  <script src="js/global.js"></script>
  <script>
    var ipfs = window.IpfsTesraApi(ipfsConfig.ip, ipfsConfig.aipPort, ipfsConfig.protocol);
    var vm = new Vue({
      el: '#app',
      data() {
        return {
          taskId: null,
          tbLoading: false,
          modal8: false,
          modal7: false,
          modal6: false,
          modat: false,
          modal5: false,
          modal0: false,
          moda9: false,
          modalsl: false,
          modal2: false,
          modal3: false,
          modal4: false,
          loading: true,
          single: false,
          modal1: false,
          total: 100,
          isRateRuning: false,
          modal12: false,
          query: {
            nas: '',
            tis: [],
          },
          queryModel: {
            dataName: null,
            dataType: 2,
            currentPage: 1,
            pageSize: 10,
            sizeCount: 0,
            tbLoading: false
          },
          queryDataSet: {
            dataName: null,
            dataType: 1,
            currentPage: 1,
            pageSize: 10,
            sizeCount: 0,
            tbLoading: false
          },
          queryHistory: {
            taskId: null,
            currentPage: 1,
            pageSize: 10,
            sizeCount: 0,
            tbLoading: false
          },
          AIModel: {
            id: -1,
          },
          dataId: {
            id: -1
          },
          m_cls: {
            isOn: false,
            isOk: false,
          },
          m_cls1: {
            isOn: false,
            isOk: false,
          },
          animal: '闲置资源',
          value: 0,
          value1: 0,
          columnsModel: [{
            title: '创建时间',
            key: 'createTime',
            width: 140,
            align: 'center',
          },
          {
            title: '数据类型',
            key: 'dataType',
            width: 140,
            align: 'center'
          },
          {
            title: '数据名称',
            key: 'dataName',
            width: 140,
            tooltip: true,
            align: 'center'
          },
          {
            title: '文件类型',
            key: 'fileType',
            width: 140,
            align: 'center'
          },
          {
            title: '文件大小',
            key: 'fileSize',
            width: 140,
            align: 'center'
          },
          {
            title: ' ',
            key: 'caozuo',
            width: 140,
            align: 'center',
            className: 'c-ho',
            render: (h, params) => {
              return h('div', {
                class: 'sel',
                on: {
                  click: () => {
                    this.putModel(params.row.id, params.row.dataName + '.' + params.row.fileType,
                      params.row.dataHash)
                  }
                }
              }, '选择')
            },
          },
          {
            title: ' ',
            key: 'delete',
            width: 140,
            align: 'center',
            render: (h, params) => {
              if (params.row.del) {
                return h('div', {
                  class: 'del',
                  on: {
                    click: () => {
                      this.AIModel.id = params.row.id
                      this.al();
                    }
                  }
                })
              } else {
                return h('div', {
                  style: {
                    color: 'red',
                  },
                }, '使用中')
              }

            },
          },
          ],
          columnsDataSet: [{
            title: '创建时间',
            key: 'createTime',
            width: 140,
            align: 'center',
          },
          {
            title: '数据类型',
            key: 'dataType',
            width: 140,
            align: 'center'
          },
          {
            title: '数据名称',
            key: 'dataName',
            width: 140,
            tooltip: true,
            align: 'center'
          },
          {
            title: '文件类型',
            key: 'fileType',
            width: 140,
            align: 'center'
          },
          {
            title: '文件大小',
            key: 'fileSize',
            width: 140,
            align: 'center'
          },
          {
            title: ' ',
            key: 'caozuo',
            width: 140,
            align: 'center',
            className: 'c-ho',
            render: (h, params) => {
              return h('div', {
                class: 'sel',
                on: {
                  click: () => {
                    this.putDataSet(params.row.id, params.row.dataName + '.' + params.row.fileType,
                      params.row.dataHash)

                  }
                }
              }, '选择')
            },
          },
          {
            title: ' ',
            key: 'delete',
            width: 140,
            align: 'center',
            render: (h, params) => {
              if (params.row.del) {
                return h('div', {
                  class: 'del',
                  on: {
                    click: () => {
                      this.dataId.id = params.row.id
                      this.delData();
                      // this.requestDelData(1, params.row.id)
                    }
                  }
                })
              } else {
                return h('div', {
                  style: {
                    color: 'red',
                  },
                }, '使用中')
              }
            },
          },
          ],
          columns1: [{
            title: '创建时间',
            key: 'createTime',
            width: 140,
            align: 'center',

          },
          {
            title: '训练编号',
            key: 'trainingCode',
            width: 140,
            tooltip: true,
            align: 'center'
          },
          {
            title: '训练时间',
            key: 'createTime',
            width: 140,
            align: 'center'
          },
          {
            title: '训练时长',
            key: 'taskH',
            width: 140,
            align: 'center'
          },
          {
            title: '模型',
            key: 'modelName',
            width: 140,
            align: 'center'
          },
          {
            title: '数据集',
            key: 'contentName',
            width: 140,
            align: 'center'
          },
          {
            title: '使用算例（TH）',
            key: 'payTh',
            width: 140,
            align: 'center'
          }
          ],
          dataModel: [],
          dataDateSet: [],
          data1: [],
          // po: [{
          //   poimg: 'images/iocn1.png',
          //   potit: '警告：模型配置有误，可能导致训练中断；详见：inFlex Bata2.0'
          // }, {
          //   poimg: 'images/iocn1.png',
          //   potit: '错误：模型配置错误，无法进行训练；详见：inFlex Bata2.0'
          // }],
          codeOrConfig: '',
          taskCallbackLog: "",
          taskCallbackErrLog: "",
          initData: {
            gpuAMax: 6,
            gpuANum: 0,
            gpuBMax: 3,
            gpuBNum: 0,
            gpuBalance: 0,
            queueNum: 0,
            taskDetai: {
              content_hash: null,
              content_id: null,
              content_name: null,
              file_hash: null,
              model_id: null,
              model_hash: null,
              model_name: null,
              create_time: 0,
              gpu_a_num: 0,
              gpu_b_num: 0,
              hour_th: 0,
              id: 0,
              status: 0,
              task_h: 0,
              task_id: null,
              training_code: null,
              training_status: 0,
              training_type: 1,
              uid: 0,
              use_task_m: 0,
              use_gpu_total: 0,
            },
            taskId: null,
            trainingCreateTime: 0,
          },
          itlTaskStatus: null,
          itl2Status: null,
          logLowerTime: null,
          errLogLowerTime: null,
          loss: '0.0',
          acc: '0.0',
          trainingCount: 0,
          payTotalTh: 0,
          outputModelHash: '',
          inspectFile: '',
        }
      },
      created() {
        var hash = top.location.hash.slice(1)
        if (hash) {
          this.taskId = hash.replace(/^.+?(\w+)$/, '$1')
          this.queryHistory.taskId = this.taskId
        }
        this.requestData()
        this.requestHistory()
        this.requestModel()
        this.requestDataset()
      },
      methods: {
        trActive(row, index) {
          return 'my-row-active'
        },
        asyncOK() {
          setTimeout(() => {
            this.modal6 = false;
          }, 2000);
        },
        // 查询(带参数请求list)
        queryList() {
          // this.query.outTime = this.query.cTime.map(cur => {
          //   return cur && cur.getTime()
          // })
          this.requestList(this.query)
        },
        formReset(name) {
          this.$refs[name].resetFields()
        },
        resetModel() {
          this.queryModel.dataName = null
          this.queryModel.currentPage = 1
        },
        resetDataSet() {
          this.queryDataSet.dataName = null
          this.queryDataSet.currentPage = 1
        },
        delkong() {
          this.modal5 = true;
        },
        shujuji() {
          this.modal4 = true;
        },
        sel() {
          this.modal3 = true;
        },
        lishi() {
          this.modal2 = true;
        },
        del() {
          this.modal6 = true;
        },
        al(id) {
          this.modal8 = true;

        },
        modalCancel() {
          this.modal6 = false;
        },
        col18() {

          this.modal8 = false;
        },
        col15() {
          this.modal5 = false;
        },
        zzqx() {
          this.modal0 = false;
        },
        zz() {
          this.modal0 = true;
        },
        zzl() {
          this.modat = true;
        },
        zzlqx() {
          this.modat = false;
        },
        kr() {
          this.moda9 = true;
        },
        asyncOK() {
          this.moda9 = false;
        },

        delAiModel() {
          this.dataModel = this.dataModel.filter(v => v.id !== this.AIModel.id);
          this.modal8 = false;
          // this.list = this.list.splice(index, 1);
        },
        delAata() {
          this.dataDateSet = this.dataDateSet.filter(v => v.id !== this.dataId.id);
          this.modal12 = false;
          // this.list = this.list.splice(index, 1);
        },
        delData() {
          this.modal12 = true;
        },
        deldata1() {
          this.modal12 = false;
        },
        runanim() {
          this.isRateRuning = true;
          setTimeout(() => {
            this.isRateRuning = false;
          }, 350);
        },
        putDataSet(id, name, hash) { //保存数据集hash
          axios.post('/user/saveContentHash', G.paramsSerializer({
            'taskId': this.taskId,
            'contentId': id,
            'contentHash': hash,
            'contentName': name
          }))
            .then(res => {
              if (res.data.stateCode == 1) {
                this.initData.taskDetai.content_hash = hash
                this.initData.taskDetai.content_name = name
                this.modal4 = false
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        putModel(id, name, hash) { //保存模型hash
          axios.post('/user/saveModelHash', G.paramsSerializer({
            'taskId': this.taskId,
            'modelId': id,
            'modelHash': hash,
            'modelName': name
          }))
            .then(res => {
              if (res.data.stateCode == 1) {
                this.initData.taskDetai.model_hash = hash
                this.initData.taskDetai.model_name = name
                // this.initData.taskDetai.file_hash = 'QmZazTNEwTrQdVLtGNdWkbzUCvJ7B59AXCYrhhNhwNNBAK' //默认配置文件hash
                this.modal3 = false
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        delModel() { //删除模型hash
          axios.post('/user/destroyModelByTaskId/' + this.taskId)
            .then(res => {
              if (res.data.stateCode == 1) {
                this.initData.taskDetai.model_id = null
                this.initData.taskDetai.model_hash = null
                this.initData.taskDetai.model_name = null
                this.modal5 = false
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        addFile() {
          if (this.codeOrConfig) {
            ipfs.add(this.codeOrConfig, (err, result) => {
              if (err) {
                return
              }
              axios.post("/user/saveFileHash", G.paramsSerializer({
                'taskId': this.initData.taskId,
                'fileHash': result.Hash
              }))
                .then(res => {
                  if (res.data.stateCode == 1) {
                    this.initData.taskDetai.file_hash = result.Hash
                    this.runanim();
                    setTimeout(() => {
                      this.$Message.success('保存成功')
                    }, 350)
                  } else {
                    this.$Message.console.error('保存失败')
                  }
                })
                .catch(err => {
                  this.$Message.error('保存失败')
                })
            })
          }

        },
        requestData() {
          axios.get('/user/taskDetail/' + this.taskId)
            .then(res => {
              if (res.data.code == 1) {
                this.initData = res.data.data
                this.value = this.initData.taskDetai.hour_th
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        requestModel(currentPage) { //请求模型列表
          if (currentPage) {
            this.queryModel.currentPage = currentPage
          }
          axios.get('/dataManager/getDataHistory', {
            params: this.queryModel
          })
            .then(res => {
              if (res.data.code == 1) {
                this.queryModel.tbLoading2 = false
                this.queryModel.sizeCount = res.data.data.total
                this.queryModel.currentPage = res.data.data.pageNum
                this.queryModel.pageSize = res.data.data.pageSize
                var temp = res.data.data.list;
                temp.forEach(item => {
                  item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm');
                  item.dataType = item.dataType == 1 ? '数据集' : '模型';
                });
                this.dataModel = temp;
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        requestDataset(currentPage) { //请求数据集列表
          if (currentPage) {
            this.queryDataSet.currentPage = currentPage
          }
          axios.get('/dataManager/getDataHistory', {
            params: this.queryDataSet
          })
            .then(res => {
              if (res.data.code == 1) {
                this.queryDataSet.tbLoading2 = false
                this.queryDataSet.sizeCount = res.data.data.total
                this.queryDataSet.currentPage = res.data.data.pageNum
                this.queryDataSet.pageSize = res.data.data.pageSize
                var temp = res.data.data.list;
                temp.forEach(item => {
                  item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm');
                  item.dataType = item.dataType == 1 ? '数据集' : '模型';
                  item._checked = false;
                  item._disabled = !item.del;
                  if (!item.del) {
                    item.iks = '队列中或运行中, 数据无法删除';
                  }
                });
                this.dataDateSet = temp;
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        requestHistory(currentPage) { //请求任务历史
          if (currentPage) {
            this.queryHistory.currentPage = currentPage
          }
          axios.get('/user/getHistoryPayTaskTh', {
            params: this.queryHistory
          })
            .then(res => {
              if (res.data.code == 1) {
                this.queryHistory.tbLoading2 = false
                this.queryHistory.sizeCount = res.data.data.sizeCount
                this.queryHistory.currentPage = res.data.data.currentPage
                this.queryHistory.pageSize = res.data.data.pageCount
                var temp = res.data.data.listModel
                temp.forEach(item => {
                  item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm')
                })
                this.trainingCount = res.data.numberOfTraining
                this.payTotalTh = res.data.consume
                this.data1 = temp
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        startTask() {
          if (this.initData.gpuBalance <= 0) {
            this.modalsl = true
            return
          }
          axios.post("/user/taskStart/" + this.taskId)
            .then(res => {
              if (res.data.stateCode == 1) {
                this.requestData()
                this.taskCallbackLog = ''
                this.taskCallbackErrLog = ''
              } else {
                this.$Message.info(res.data.msg)
              }
            })
            .catch(err => {
              this.$Message.console.error('开始训练失败')
            })
        },
        s_sub() {
          this.modalsl = false;
          G.to("buyHash")
        },
        s_quxiao() {
          this.modalsl = false;
        },
        stopTask() { //终止任务
          this.modal0 = false
          axios.post("/user/taskStop/" + this.taskId)
            .then(res => {
              if (res.data.stateCode == 1) {
                this.requestData()
              } else {
                this.$Message.info(res.data.msg)
              }
            })
            .catch(err => {
              this.$Message.console.error('终止任务失败')
            })
        },
        stopTask1() { //退出队列
          this.modat = false
          axios.post("/user/taskStop/" + this.taskId)
            .then(res => {
              if (res.data.stateCode == 1) {
                this.requestData()
              } else {
                // this.$Message.info(res.data.msg)
                this.$Message.error('退出队列失败')
              }
            })
            .catch(err => {
              this.$Message.error('退出队列失败')
            })
        },
        // 计时函数(检查任务状态改变)
        timerTaskStatusRun() {
          if (this.itlTaskStatus) {
            clearInterval(this.itlTaskStatus)
            this.itlTaskStatus = null
          }
          this.itlTaskStatus = setInterval(() => {
            axios.get("/user/checkTaskTrainingStatus/" + this.taskId)
              .then(res => {
                if (res.data.stateCode == 1) {
                  if (parseInt(res.data.model) != parseInt(this.initData.taskDetai.training_status)) {
                    this.requestData()
                  }
                }
              })
              .catch(err => {
                console.log(err)
              })
          }, 5e3)
        },
        stopTimerTaskStatusRun() {
          if (this.itlTaskStatus) {
            clearInterval(this.itlTaskStatus)
            this.itlTaskStatus = null
          }
        },
        // 计时函数(训练中获取数据)
        timer2StatusRun() {
          if (this.itl2Status) {
            clearInterval(this.itl2Status)
            this.itl2Status = null
          }
          this.itl2Status = setInterval(() => {
            this.requestHaveHandTh()
            this.requestTaskLog()
            this.requestTaskErrLog()
          }, 1e3)
        },
        stopTimer2StatusRun() {
          if (this.itl2Status) {
            clearInterval(this.itl2Status)
            this.itl2Status = null
          }
        },
        requestTaskLog() { //请求任务日志.type：1正常，2错误，null全部
          axios.get("/user/getTaskCallbackLog/" + this.taskId, {
            params: {
              'datetime': this.logLowerTime,
              'type': 1
            }
          })
            .then(res => {
              if (res.data.success) {
                var list = res.data.data.listModel;
                for (var i = 0; i < list.length; i++) {
                  this.taskCallbackLog = this.taskCallbackLog + formatDateTiem(list[i].createTime) + "---" + list[
                    i].content + "\n"
                }
                if (list.length > 0) {
                  this.logLowerTime = list[list.length - 1].createTime;
                }
              }
            })
            .catch(err => {
              console.log(err)
            })
        },
        requestTaskErrLog() { //请求任务错误日志.type：1正常，2错误，null全部
          axios.get("/user/getTaskCallbackLog/" + this.taskId, {
            params: {
              'datetime': this.errLogLowerTime,
              'type': 2
            }
          })
            .then(res => {
              if (res.data.success) {
                var list = res.data.data.listModel;
                for (var i = 0; i < list.length; i++) {
                  this.taskCallbackErrLog = this.taskCallbackErrLog + formatDateTiem(list[i].createTime) + "---" +
                    list[
                      i].content + "\n"
                }
                if (list.length > 0) {
                  this.errLogLowerTime = list[list.length - 1].createTime;
                }
              }
            })
            .catch(err => {
              console.log(err)
            })
        },
        requestHaveHandTh() { //进行中任务的实时算力用量
          axios.get("/user/getActiveTask/" + this.taskId)
            .then(res => {
              if (res.data.success) {
                var model = res.data.data.model;
                if (model != null) {
                  if (model.chargingTime != null && model.startTime != null) {
                    var temptime = (model.chargingTime - model.startTime) / (1000 * 60);
                    this.initData.taskDetai.use_task_m = Math.min(temptime, this.initData.taskDetai.task_h * 60 -
                      1)
                  }
                  this.initData.taskDetai.use_gpu_total = model.payTh == null ? 0 : model.payTh
                  this.loss = model.loss == null ? '0.0' : model.loss
                  this.acc = model.acc == null ? '0.0' : model.acc
                }
              }
            })
            .catch(err => {
              console.log(err)
            })
        },
        requestNewestTaskLog() { //任务最新日志
          axios.get("/user/getNewestTaskLogByTaskId/" + this.taskId)
            .then(res => {
              if (res.data.success) {
                var content = res.data.data.model.content;
                var lossS = content.indexOf("loss is ");
                var lossE = content.indexOf(",", lossS);
                if (lossS > 0 && lossS < lossE) {
                  this.loss = content.substring(lossS + 8, lossE)
                }
                var accS = content.indexOf("acc is ");
                if (accS > 0) {
                  this.acc = content.substring(accS + 7)
                }
              }
            })
            .catch(err => {
              console.log(err)
            })
        },
        requestDilatation: G.debounce(function () { //扩容
          // if (this.thValue != 0 && this.thValue < 8.1) {
          //   return this.$Message.error('算力小于8.1，无法分配GPU')
          // }
          if (this.value == this.initData.taskDetai.hour_th && this.value1 == 0) {
            return this.$Message.error('弹性扩容失败,参数无改变')
          }
          if (this.initData.taskDetai.training_status == 2 && this.value > (this.gpuNum + this.initData.taskDetai.hour_th)) {
            return this.$Message.error('弹性扩容失败，训练状态无法选择非闲置资源（或者您选择的资源 已被占用）。')
          }

          axios.post("/user/taskDilatation", G.paramsSerializer({
            'taskId': this.initData.taskId,
            'hourTh': this.value,
            'taskHours': this.value1
          }))
            .then(res => {
              if (res.data.stateCode == 1) {
                this.modal1 = false
                this.requestData()
              } else {
                this.$Message.info(res.data.msg)
              }
            })
            .catch(err => {
              this.$Message.error("弹性扩容失败")
              console.log(err)
            })
        }, G.DEBOUNCE_DELAY || 200),
        requestTaskDestroy() { //销毁任务
          if (this.single) {
            var temp = [];
            if (this.initData.taskDetai.model_id) {
              temp.push(this.initData.taskDetai.model_id)
            }
            if (this.initData.taskDetai.content_id) {
              temp.push(this.initData.taskDetai.content_id)
            }
            axios.post('/dataManager/delete', G.paramsSerializer({
              'ids': temp
            }))
          }
          axios.post("/user/taskDestroy/" + this.taskId)
            .then(res => {
              if (res.data.stateCode == 1) {
                G.to('ai_training')
              } else {
                this.modal6 = false
                this.$Message.info(res.data.msg)
              }
            })
            .catch(err => {
              this.modal6 = false
              this.$Message.error("销毁任务失败")
              console.log(err)
            })
        },
        requestDelData(type, id) { //删除用户空间的模型和数据集。ids值数组
          axios.post('/dataManager/delete', G.paramsSerializer({
            'ids': [id]
          }))
            .then(res => {
              if (res.data.code == 1) {
                if (type == 1) {
                  this.dataDateSet = this.dataDateSet.filter(item => {
                    return item.id != id
                  })
                  this.queryDataSet.sizeCount--;
                } else if (type == 2) {
                  this.dataModel = this.dataModel.filter(item => {
                    return item.id != id
                  })
                  this.queryModel.sizeCount--;
                }
              }
            })
            .catch(err => { });
        },
        requestOutputModel() {
          axios.get("/modelManagement/getOutputModel/" + this.taskId)
            .then(res => {
              if (res.data.stateCode == 1) {
                this.outputModelHash = res.data.model.hash
              }
            })
            .catch(err => {
              console.log(err)
            })
        },
        downloadModel() {
          if (this.outputModelHash) {
            window.open(ipfsConfig.protocol + '://' + ipfsConfig.ip + ':' + ipfsConfig.GatewayPort + '/ipfs/' +
              this.outputModelHash)
          }
        },
      },
      computed: {
        modelNull() {
          return !this.initData.taskDetai.model_hash
        },
        dataSetNull() {
          return !this.initData.taskDetai.content_hash
        },
        startDisplay() {
          let state = this.initData.taskDetai.training_status
          return state == 0 || state == 3 || state == 4
        },
        startUsable() {
          return !!this.initData.taskDetai.file_hash && !!this.initData.taskDetai.content_hash && this.codeConfigInspect !=
            0 && this.codeConfigInspect % 10 != 3
        },
        modelemptyDisplay() {
          return !!this.initData.taskDetai.model_hash
        },
        modelDatasetUsable() {
          let state = this.initData.taskDetai.training_status
          return state == 0 || state == 3 || state == 4
        },
        stopDisplay() {
          let state = this.initData.taskDetai.training_status
          return state == 2 || state == 9
        },
        exitqueueDisplay() {
          let state = this.initData.taskDetai.training_status
          return state == 1
        },
        modeldownloadDisplay() {
          let state = this.initData.taskDetai.training_status
          return this.outputModelHash && (state == 3 || state == 4)
        },
        logdownloadDisplay() {
          let state = this.initData.taskDetai.training_status
          return state == 3 || state == 4
        },
        dilatationUsable() {
          let state = this.initData.taskDetai.training_status
          return state == 0 || state == 2 || state == 3 || state == 4
        },
        gpuHourth() {
          return G.roundFixed(this.initData.taskDetai.hour_th / 11.3);
        },

        gpuValue() {
          return G.roundFixed(this.value / 11.3)
        },
        thValue() {
          return G.roundFixed(this.value * this.gpuMax / 100)
        },
        gpuMax() {
          return G.roundFixed(this.initData.gpuAMax * 8.1 + this.initData.gpuBMax * 11.3)
        },
        gpuNum() {
          return G.roundFixed(this.initData.gpuANum * 8.1 + this.initData.gpuBNum * 11.3)
        },
        leaveWidth() {
          return G.roundFixed((this.gpuNum + this.initData.taskDetai.hour_th) * 100 / 55)
        },
        codeConfigInspect() { //代码或配置检查。0未配置，1正确，2不完全，3错误
          var temp = !this.initData.taskDetai.model_hash ? 10 : 20
          if (!this.inspectFile) {
            return 0
          }
          var keys = [],
            count = 0
          if (this.initData.taskDetai.model_hash) {
            //配置检查
            keys = ['train_step', 'def train_msg', 'def train_model']
          } else {
            //代码检查
            keys = ['TRAINING_STEPS', 'SAVE_CHECKPOINT_SECS', 'def next_batch(step)', 'def build_model(is_chief)',
              'def train_model(session, step)'
            ]
          }
          keys.forEach(item => {
            if (String(this.inspectFile).indexOf(item) > -1) {
              count++
            }
          })
          if (count == keys.length) {
            return 1
          } else if (count == 0) {
            return temp + 3
          } else {
            return temp + 3
          }
        },
      },
      watch: {
        'initData.taskDetai.file_hash': function () {
          if (this.initData.taskDetai.file_hash) {
            ipfs.cat(this.initData.taskDetai.file_hash, (err, file) => {
              if (err) {
                return
              }
              this.codeOrConfig = file
              this.inspectFile = file
            })
          } else {
            this.codeOrConfig = '';
          }
        },
        'initData.taskDetai.training_status': function () {
          let state = this.initData.taskDetai.training_status
          if (state == 1 || state == 2 || state == 8 || state == 9) {
            this.timerTaskStatusRun()
          } else {
            this.stopTimerTaskStatusRun()
          }
          if (state == 2) {
            this.timer2StatusRun()
          } else {
            this.stopTimer2StatusRun()
          }
          if (state == 3 || state == 4) {
            this.requestOutputModel()
            this.requestTaskLog()
            this.requestTaskErrLog()
            this.requestNewestTaskLog()
          }
        }
      },
      filters: {
        formatDate(val, tmp) {
          if (!val || val <= 0) {
            return ''
          }
          if (!tmp) {
            tmp = 'YYYY-MM-DD HH:mm'
          }
          return moment(val).format(tmp)
        }
      }
    })
    $("textarea").on('keydown', function (e) {
      if (e.keyCode == 9) {
        e.preventDefault();
        var indent = '    ';
        var start = this.selectionStart;
        var end = this.selectionEnd;
        var selected = window.getSelection().toString();
        selected = indent + selected.replace(/\n/g, '\n' + indent);
        this.value = this.value.substring(0, start) + selected + this.value.substring(end);
        this.setSelectionRange(start + indent.length, start + selected.length);
      }
    })

    function formatDateTiem(val, tmp) {
      if (!tmp) {
        tmp = 'YYYY-MM-DD HH:mm:ss'
      }
      return moment(val).format(tmp)
    }

    function fM(tM) {
      if (!tM) {
        return '0分'
      }
      var temp = ''
      var o = {
        "dd": parseInt(tM / (24 * 60)), //天
        "hh": parseInt((tM % (24 * 60)) / 60), //时   
        "mm": parseInt((tM % (24 * 60)) % 60), //分   
        "M": tM //总分  
      };
      if (o.dd > 0) {
        temp += o.dd + '天 '
      }
      if (o.dd > 0 || o.hh > 0) {
        temp += o.hh + '小时 '
      }
      if (o.dd > 0 || o.hh > 0 || o.mm > 0) {
        temp += o.mm + '分'
      }
      return temp;
    }
  </script>
</body>

</html>